<template>
  <div class="home">
    <el-carousel :interval="5000" arrow="hover" height="400px" type="card" indicator-position="none"
                 v-show="banners.length!==0">
      <el-carousel-item v-for="item in banners" :key="item.id">
        <img class="banner-item" :src="item.url" alt="">
      </el-carousel-item>
    </el-carousel>

    <div class="event" v-show="news.length!==0&&notice.length!==0">

      <div class="news">
        <p class="big-title"><span><i class="iconfont icon-xuexiao2"></i>学院新闻</span><span class="multi">更多</span></p>
        <div class="hot">
          <el-carousel height="100%" style="width: 48%" indicator-position="none" :interval="3000">
            <el-carousel-item v-for="item in news" :key="item.id">
              <img :src="item.cover" alt="">
            </el-carousel-item>
          </el-carousel>
          <div class="hot-news" @click="$router.push({path:'/detail',query:{data:news[0]}})">
            <p class="hot-title">{{news[0].title}}</p>
            <p class="hot-content">{{news[0].summary}}</p>
          </div>
        </div>
        <p v-for="item in news" class="content" :key="item.id" @click="$router.push({path:'/detail',query:{data:item}})">
          <span class="time">{{item.createTime}}</span>
          <span class="title">{{item.title}}</span>
        </p>
      </div>

      <div class="notice">
        <p class="big-title"><span><i class="iconfont icon-tongzhi1"></i>通知公告</span><span class="multi">更多</span></p>
        <p v-for="item in notice" class="content" :key="item.id" @click="$router.push({path:'/detail',query:{data:item}})">
          <span class="time">{{item.createTime}}</span>
          <span class="title">{{item.title}}</span>
        </p>
      </div>

    </div>
    <div class="activity">
      <p class="activity-title"><i class="iconfont icon-huodong1"></i>专题活动</p>
      <div style="display: flex;justify-content: space-between;margin-top: 30px">
        <img style="width: 24%;height: 100px;border-radius: 5px" src="~@/assets/11.png" alt="">
        <img style="width: 24%;height: 100px;border-radius: 5px" src="~@/assets/22.png" alt="">
        <img style="width: 24%;height: 100px;border-radius: 5px" src="~@/assets/33.png" alt="">
        <img style="width: 24%;height: 100px;border-radius: 5px" src="~@/assets/44.png" alt="">
      </div>
    </div>

  </div>
</template>

<script>
  import {fetchIndexList} from "@/api/offiicial";

  export default {
    name: "Home",
    data() {
      return {
        banners: [],
        news: [],
        notice: []
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        fetchIndexList().then(res => {
          res.data.news.forEach(n => n.createTime = n.createTime.substr(0, 10))
          res.data.notice.forEach(n => n.createTime = n.createTime.substr(0, 10))
          this.banners = res.data.banners
          this.news = res.data.news
          this.notice = res.data.notice
        })
      }
    }
  }
</script>

<style scoped>
  .home {
    padding-top: 10px;
  }

  .banner-item {
    height: 400px;
    width: 100%;
    object-fit: fill;
    border-radius: 5px;
  }

  .event {
    margin: 10px auto;
    width: 1350px;
    display: flex;
  }

  .news, .notice {
    background-color: #ffffff;
    border-radius: 5px;
    padding: 20px;
  }

  .news {
    width: 63%;
    flex: 6;
    margin-right: 10px;
  }

  .notice {
    width: 35%;
    flex: 4;
  }

  .big-title {
    font-size: 19px;
    font-weight: bold;
    color: var(--color-text);
    line-height: 2;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    padding-bottom: 5px;
  }

  .iconfont {
    font-size: 22px;
    color: var(--color-high-text);
    margin-right: 10px;
  }

  .multi {
    font-size: 14px;
    color: rgba(0, 0, 0, .5);
  }

  .multi:hover {
    color: var(--color-high-text);
  }

  .content {
    font-size: 14px;
    line-height: 3.2;
    border-bottom: 1px rgba(0, 0, 0, .1) dashed;
    display: flex;
  }

  .content > .title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 80%;
  }

  .content:hover {
    color: var(--color-high-text);
  }

  .content > .time {
    width: 100px;
    margin-right: 20px;
  }

  .news > .content:last-of-type, .notice > .content:last-of-type {
    border-bottom: none;
  }

  .hot {
    margin: 10px 0 0 0;
    display: flex;
    height: 220px;
    border-bottom: 1px rgba(0, 0, 0, .1) dashed;
  }

  .hot img {
    width: 100%;
    height: 94%;
    border-radius: 5px;
  }

  .hot-news {
    padding: 15px;
    width: 50%;
  }

  .hot-news:hover .hot-title{
    color: var(--color-high-text);
  }

  .hot-title {
    font-weight: bold;
    font-size: 19px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    line-height: 2.5;
  }

  .hot-content {
    font-size: 17px;
    text-indent: 2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
  }

  .activity-title{
    border-bottom: 1px solid rgba(0,0,0,.1);
    line-height: 50px;
    font-size: 18px;
    font-weight: bold;
  }

  .activity{
    padding: 10px 20px;
    height: 200px;
    margin: 10px auto;
    width: 1310px;
    background-color: #ffffff;
  }


</style>
